<template>
	<view class="container">
		<view class="form-section">
			<!-- 设备信息 -->
			<view class="form-group">
				<view class="form-title">设备明细</view>
				<view class="form-item">
					<text class="label">设备编号</text>
					<text class="value">{{ deviceInfo.sbbh || '-' }} {{ deviceInfo.sbmc || '-' }}</text>
				</view>
				<view class="form-item">
					<text class="label">状态</text>
					<text class="value">{{ deviceInfo.zt || '-' }}</text>
				</view>
				<view class="form-item">
					<text class="label">厂区</text>
					<text class="value">{{ deviceInfo.whichworhshop || '-' }}</text>
				</view>
				<view class="form-item">
					<text class="label">型号</text>
					<text class="value">{{ deviceInfo.xh || '-' }}</text>
				</view>
				<view class="form-item">
					<text class="label">部门名称</text>
					<text class="value">{{ deviceInfo.bmmc || '-' }}</text>
				</view>
				<view class="form-item">
					<text class="label">备注</text>
					<text class="value">{{ deviceInfo.bz || '-' }}</text>
				</view>
			</view>

			<!-- 历史运行记录 -->
			<view class="form-group">
				<view class="form-title">历史运行记录</view>

				<view class="detail_body">
					<view class="topView">
						<view class="top_tab_view">
							<picker mode="date" @change="timeChange" @cancel="timeCancel">
								<view class="custom-picker">
									<view class="custom-picker-text">
										{{ selectedTime || '请选择时间' }}
									</view>
									<view class="arrow-icon"></view>
								</view>
							</picker>
						</view>
					</view>

					<up-list @scrolltolower="scrolltolower" enableFlex>

						<view v-show="operationList.length == 0 ">
							<up-empty mode="list">
							</up-empty>
						</view>

						<view class="list_item" v-for="(item, index) in operationList" :key="index">
							<view class="list_item_top">
								<view class="list_item_top_left">
									{{ item.bc || "无" }}
								</view>
								<view class="list_item_top_right">
									班组长:{{ item.monitor || "无" }}
								</view>
							</view>

							<view class="list_item_center">
								<view class="list_item_center_row">
									<view class="list_item_center_title">记录日期:</view>
									<view class="list_item_center_content">{{ item.rq || "无" }}</view>
								</view>
								<view class="list_item_center_row">
									<view class="list_item_center_title">操作人员:</view>
									<view class="list_item_center_content">{{ item.operator || "无" }}</view>
								</view>

								<view class="list_item_bottom">
									<navigator class="list_item_bottom_nav" @click="getToDetail(item.id,'detail')">
										查看详情
									</navigator>
									<view class="list_item_bottom_delete" @click="deleteRecord(item)">
										删除记录
									</view>

								</view>
							</view>
						</view>
					</up-list>
				</view>

			</view>

			<view class="action-buttons">
				<u-button class="action-btn confirm-btn" type="primary" size="medium"
					@click="getToDetail(deviceId,'add')" v-show="true">
					<u-icon name="plus" size="18" color="#fff"></u-icon>
					<text>新增运行记录</text>
				</u-button>

			</view>

		</view>
	</view>
</template>

<script>
	import {
		deepClone
	} from '../../../uni_modules/uview-plus';
	import fill from './fill.vue';
	export default {
		components: {
			fill
		},
		data() {
			return {
				deviceId: '', // 从路由参数获取
				deviceInfo: {},
				operationList: [], //运行记录
				selectedTime: '',
				searchData: {
					date: '',
				},
				pagination: {
					pageNum: 1, // 当前页码
					pageSize: 5, // 每页条数
					total: 0, // 总条数
				},
			};
		},
		onLoad(options) {
			this.deviceId = options.id
			this.getData()
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$commonUnits.postRequest('sbby.zcglsbtzbiz.getZcglSbtzById.mobile', {
					id: this.deviceId
				}).then(res => {
					if (!res) {
						uni.showToast({
							title: '查询错误，请重试',
							icon: 'none'
						});
					} else {
						this.deviceInfo = res.res[0];
						// 获取运行记录数据
						this.getOperationRecords();
					}
				})
			},

			getOperationRecords() {
				const currentParams = {
					date: this.searchData.date,
					sbid: this.deviceId,
				}
				// 如果搜索条件变化，重置分页
				if (JSON.stringify(currentParams) !== JSON.stringify(this.searchParams)) {
					this.pagination.pageNum = 1;
					this.operationList = [];
				}
				this.searchParams = {
					...currentParams
				};
				const params = {
					...currentParams,
					pageNum: this.pagination.pageNum,
					pageSize: this.pagination.pageSize
				};
				this.$commonUnits.postRequest(
					"sbby.sbyxrj.getRunRecordList.mobile",
					params
				).then(res => {
					if (!res.result.list || res.result.list.length === 0) {
						this.operationList = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						});
					} else {

						const newData = res.result.list.map(item => {
							if (item.rq) {
								item.rq = item.rq.split(' ')[0];
							}
							return item;
						});
						this.pagination.total = res.result.total;
						// console.log(newData)

						if (this.pagination.pageNum === 1) {
							this.operationList = newData;
						} else {
							this.operationList = [...this.operationList, ...newData];
						}

					}
				}).catch(err => {
					this.operationList = [];
				});

			},

			timeChange(e) {
				this.selectedTime = e.detail.value;
				this.searchData.date = e.detail.value;
				this.getOperationRecords()
			},

			timeCancel() {
				this.selectedTime = ""
				this.searchData.date = ""
				this.getOperationRecords()
			},

			scrolltolower() {
				// 如果已经加载完所有数据，不再请求
				if (this.operationList.length >= this.pagination.total) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
					return;
				}
				this.pagination.pageNum++;
				this.getOperationRecords();
			},

			deleteRecord(item) {
				debugger
				let delList = []
				delList.push(item)
				console.log(delList)
				uni.showModal({
					title: '提示',
					content: '确定要删除这条记录吗？',
					success: (res) => {
						if (res.confirm) {
							this.$commonUnits.postRequest(
								'sbby.ywglyxglyxrjbiz.deleteYwglYxglYxrjs.mobile', {
									ywglyxglyxrjs: delList
								}).then(res => {
								if (res.code === "1" && res.msg === "操作成功！") {
									try {
										const ywglyxglyxrj = deepClone(item)
										let data = JSON.stringify(ywglyxglyxrj)

										this.$commonUnits.postRequest(
											'sbby.sbyxrj.insertOrUpdateSbts.mobile',
											JSON.stringify({
												ywglyxglyxrj: ywglyxglyxrj
											})
										).then(res => {
											if (res.code === "1" && res.msg === "操作成功！") {
												uni.showToast({
													title: '操作成功',
													icon: 'success',
												})
												setTimeout(() => {}, 1500)
											} else {
												uni.showToast({
													title: '台时更新失败',
													icon: 'none',
												})
											}
										})

									} catch (tsError) {
										console.error('台时更新失败')
									}
									// 刷新列表
									this.pagination.pageNum = 1;
									this.getOperationRecords();
								} else {
									uni.showToast({
										title: '删除记录失败，请重试',
										icon: 'none'
									});
								}
							}).catch(err => {
								uni.showToast({
									title: '删除出错,请重试',
									icon: 'none'
								});
							});
						}
					}
				});
			},

			getToDetail(id, mode) {
				uni.navigateTo({
					url: `/pagesOne/pages/statistics/fill?mode=${mode}&id=${id}`
				});
			},

		}
	};
</script>

<style scoped>
	.form-section {
		padding: 20rpx;
	}

	.form-group {
		background: #ffffff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
	}

	.form-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
		border-left: 4rpx solid #1890ff;
		padding-left: 12rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.label {
		min-width: 160rpx;
		color: #666;
		font-size: 26rpx;
	}

	.value {
		flex: 1;
		color: #333;
		font-size: 26rpx;
	}

	/* 运行记录列表样式 */
	.detail_body {
		background: white;
		height: auto;
	}

	.list_item {
		background-color: white;
		margin: 5px;
		padding: 5px 12px;
		border-radius: 5px;
		border: 1px solid #dcdfe6;
	}

	.list_item_top {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		line-height: 24px;
	}

	.list_item_top_left {
		width: 100%;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex: 1;
		min-width: 0;
	}

	.list_item_top_right {
		flex-shrink: 0;
		text-align: right;
		font-size: 15px;
		color: gray;
		white-space: nowrap;
	}

	.list_item_center {
		width: 100%;
		margin: 10px 0;
		color: gray;
	}

	.list_item_center_row {
		margin-top: 8px;
		display: flex;
		flex-direction: row;
	}

	.list_item_center_title {
		min-width: 60px;
		margin-right: 10px;
	}

	.list_item_center_content {
		word-break: break-all;
		margin-left: auto;
	}

	.list_item_bottom {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin: 10px 0;
		gap: 10rpx;
	}

	.list_item_bottom_nav {
		color: #2979ff;
		padding: 5px 10px;
		border-radius: 4px;
		cursor: pointer;
	}

	.list_item_bottom_delete {
		color: #ff4d4f;
		padding: 5px 0px;
		border-radius: 4px;
		cursor: pointer;
	}

	.top_tab_view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		height: 45px;
		margin-top: -5px;
	}

	.filter-section-title {
		padding: 5px 0px;
		font-size: 16px;
		font-weight: bold;
		color: #303133;
		background-color: #ffffff;
		margin: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.custom-picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5px 12px;
		border: 1px solid #dcdfe6;
		border-radius: 6px;
		background-color: #f7f7f7;
		color: #606266;
		font-size: 14px;
		transition: all 0.3s;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.custom-picker-text {
		flex: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-right: 8px;
	}

	.arrow-icon {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #909399;
		margin-left: -5px;
		transition: transform 0.3s;
	}


	/* 操作按钮容器 */
	.action-buttons {
		/* 		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15rpx;
		margin: 20rpx 0;
		padding: 0 20rpx; */
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0);
		padding: 20rpx 30rpx;
		z-index: 999;
	}

	/* 基础按钮样式 */
	.action-btn {
		flex: 1;
		min-width: 200rpx;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	/* 按钮悬停效果 */
	.action-btn:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
	}

	/* 按钮按下效果 */
	.action-btn:active {
		transform: translateY(1rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 图标和文字间距 */
	.action-btn u-icon {
		margin-right: 8rpx;
	}

	/* 确认按钮 */
	.confirm-btn {
		background: linear-gradient(135deg, #2979ff, #4a90e2);
		border: none;
	}
</style>